<template>
  <div class="timing">
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-form :inline="true" class="demo-form-inline queryFrom">
          <el-form-item label="阶段名称">
            <el-input v-model="trialName" clearable placeholder="" />
          </el-form-item>
          <el-form-item>
            <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />新 增</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <testhttb @deleteSelectData="deleteSelectData" ref="httbRef" :table-col="tabUserList" :table-data="tableUserData" @refresh="getUserList" />
    <!-- 分页 -->
    <div style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dialogTableVisible">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm autoClass">
       
        <el-form-item label="节点值" prop="stageKey">
          <el-input v-model="ruleForm['stageKey']" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="阶段名称" prop="stageName">
          <el-input v-model="ruleForm['stageName']" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="试验名称" prop="trialName">
          <el-select v-model="ruleForm['trialName']" clearable placeholder="请选择">
            <el-option v-for="(item,index) in options" :key="index" :label="item.trialName" :value="item.trialId" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="ruleForm['sort']" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm['remark']" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="ruleForm['state']">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">{{ btnStr }}</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getInfoPageList, getstageMainPageList, addStageMainInsert, updateStageMainUpdate ,stageMainRemoves} from '@/api/home_/experiment'

import experiment from '@/mixins/experiment'
export default {
  components: {
  },
  mixins: [experiment],
  data() {
    return {
      title: '新增',
      rules: {},
      ruleForm: {
        'flowchartAme': '',
        'flowchartType': '',
        'flowchartUrl': '',
        'remark': '',
        'sort': 0,
        'stageKey': '',
        'stageName': '',
        'state': '',
        'trialName': ''
      },
      dialogTableVisible: false,
      fromLabelObj: [
        {
          type: 'input',
          disable: false,
          label: '特效名称',
          required: true,
          prop: 'name',
          key: 'name',
          rules: [
            { required: true, message: '请输入特效名称', trigger: ['blur', 'change'] }
          ]
        },
        {
          label: '特效类型',
          disable: false,
          required: false,
          type: 'select',
          key: 'type',
          prop: 'type',
          options: []
        },
        {
          required: false,
          label: '特效地址',
          disable: false,
          type: 'input',
          key: 'address',
          prop: 'address'
        },
        {
          label: '备注',
          required: false,
          type: 'textarea',
          disable: false,
          key: 'remark',
          prop: 'remark'
        },
        {
          required: false,
          label: '特效图片',
          disable: false,
          type: 'uploade',
          key: 'image',
          prop: 'image'
        },
        {
          label: '状态',
          required: false,
          disable: false,
          type: 'status',
          key: 'status',
          prop: 'status'
        }

      ],
      depList: [],
      userId: '',
      trialType: '',
      trialName: '',
      tableUserData: [],
      tabUserList: [
        {
          key: 'trialName',
          title: '试验名称'
        },
        {
          key: 'stageName',
          title: '阶段名称'
        },
        {
          key: 'stageKey',
          title: '阶段值'
        },
        {
          key: 'sort',
          title: '排序'
        },
        {
          key: 'state',
          title: '状态'
        },
        {
          key: 'remark',
          title: '备注'
        }
      ],
      total: 0,
      size: 10,
      page: 1
    }
  },
  created() {

  },
  mounted() {
    getInfoPageList({
      data: {
        'trialName': '',
        'trialType': ''
      },
      'size': 1000,
      'current': 1
    }).then(res => {
      this.options = res.data.records
    })
    this.$nextTick(() => {
      this.getUserList()
    })
  },
  methods: {
    deleteSelectData(v) {
      stageMainRemoves({ ids: [v.stageId] }).then(res => {
        if (res.code == 200) {
          this.getUserList()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.msg
          })
        }
      })
    },
    commitFromData() {
      let id = ''
      let str = ''
      this.options.forEach((item, index) => {
        if (item.trialId == this.ruleForm.trialName) {
          id = item.trialId
          str = item.trialName
        }
      })
      this.ruleForm.trialId = id
      this.ruleForm.trialName = str
      if (this.ruleForm.hasOwnProperty('id')) {
        updateStageMainUpdate(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.dialogTableVisible = false
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      } else {
        addStageMainInsert(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.dialogTableVisible = false
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      }
    },
    handleSizeChange(v) {
      this.page = 1
      this.size = v
      this.getUserList()
    },
    handleCurrentChange(v) {
      this.page = v
      this.getUserList()
    },

    // 获取用户列表
    getUserList() {
      getstageMainPageList({
        data: {
          'stageName': this.trialName
        },
        'size': this.size,
        'current': this.page
      }).then(res => {
        this.tableUserData = res.data.records
        this.total = res.data.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select, .el-date-editor{
  width:100%;
}
  .timing{
    background:#fff;
    padding:20px;
  }
  .autoClass{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
    .el-form-item{
        width:50%;
    }
  }
</style>
